<template>
  <div class="block">
    <el-carousel trigger="click" height="412px">
      <el-carousel-item  v-for="item in banners" :key="item._id">
        <div class="main">
          <img class="img" @click="goDetail(item._id)" :src="item.img" alt="">
          <div class="info">
            <p class="name bg">{{item.name}}</p>
            <p class="detail bg">{{item.detail}}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import KeyboardHttp from '../../../models/KeyboardHttp.js'

export default {
  data() {
    return {
      banners:[]
    }
  },
  async mounted(){
    try {
      var res = await KeyboardHttp.getBanner()
      this.banners = res.data.res
    }catch(err){
      console.log(err);
    }
  }
}
</script>

<style scoped>
  .relative{
    position: relative;
  }
  .el-carousel__item{
    width: 980px;
    /* height: 430px; */
  }
  .img{
    width: 600px;
    height: 412px;
    cursor: pointer;
  }
  .main{
    position: relative;
  }
  .info{
    color: #fff;
    position: absolute;
    bottom: 30px;
    left: 20px;
  }
  .name{
    font-size: 20px;
  }
  .detail{
    font-size: 12px;
  }
  .bg{
    width: fit-content;
    background: rgba(16,17,23,.75);
    transition: all .2s;
    margin-bottom: 6px;
    padding: 8px;
    max-width: 750px;
    cursor: pointer;
  }
  .bg:hover{
    background: rgba(16,17,23,.95);
  }
</style>